<template>
	<view class="content">
		<view class="box1">
			<view class="aa">
				<text class="left">账户余额：</text>
				<view class="right">
					<image src="/static/doudoux.png"></image>
					<text>{{userData.balance?userData.balance:0.00}}</text>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="box">
				<view class="xx">
					<view class="item" v-for="(item, index) in priceList" :key="index"
						:class="choseIndex==index?'xuan':''" @click="clickMoney(index,item.dou)">
						<view class="left">
							<image src="/static/doudoux.png"></image>
							<text :class="choseIndex==index?'color1':''">{{item.dou}}</text>
						</view>
						<view class="right" :class="choseIndex==index?'color1':''">¥{{item.price}}</view>
					</view>
				</view>
				<view class="zdy">
					<view class="left">其他金额</view>
					<input class="input" type="digit" placeholder="自定义金额" v-model="peiceNew" focus @input="onInput" />
				</view>
			</view>
		</view>
		<view class="box3" @click="payStatus=1">
			<view class="left">
				<image src="/static/me/wechat.png"></image>
				<text>微信支付</text>
			</view>
			<view class="right">
				<image :src="payStatus==1?'/static/me/payyi.png':'/static/me/paywei.png'"></image>
			</view>
		</view>
		<view class="ts1">温馨提示：</view>
		<view class="ts2">1、充值的幸运豆可用于开盲盒；</view>
		<view class="ts2">2、充值的幸运豆不会过期，支付后的剩余幸运豆不支持赠送，不支持提现</view>
		<view class="ts2">3、未成年人消费需事先取得家人或法定监护人的陪同及监管下进行消费；</view>
		<view class="ts2">4、充值前请您仔细阅读<text class="colorq" @click.stop="goUrl">《支付服务协议》</text>，成功充值即代表您对本协议无异议。</view>
		<view class="xy" @click="checkRecharge">
			<view class="qeqeqe">
				<image :src="rechargeCheck?'/static/xz.png':'/static/ysxyx.png'"></image>
			</view>
			<view class="qwe">
				我已满18岁，已阅读并同意
				<text class="colorq" @click.stop="goUrl">《支付服务协议》</text>
			</view>
		</view>
		<view class="btn-box">
			<view class="left">
				<text class="text1">合计:￥</text>
				<text class="text2">{{peiceALL}}</text>
			</view>
			<button class="right" @click="submit">确认支付</button>
		</view>
	</view>
</template>

<script>
	var _this;
	import {
		priceInteger,
		debounce
	} from "@/utils";
	export default {
		data() {
			return {
				priceList: [{
						price: 10,
						dou: 10,
						real: 1000
					},
					{
						price: 48,
						dou: 48,
						real: 4800
					},
					{
						price: 98,
						dou: 98,
						real: 9800
					},
					{
						price: 198,
						dou: 198,
						real: 19800
					},
					{
						price: 488,
						dou: 488,
						real: 48800
					},
					{
						price: 998,
						dou: 998,
						real: 99800
					},
					{
						price: 1888,
						dou: 1888,
						real: 188800
					},
					{
						price: 4888,
						dou: 4888,
						real: 488800
					},
					{
						price: 9888,
						dou: 9888,
						real: 988800
					}
				],
				peiceNew: '',
				peiceALL: '',
				choseIndex: 0,
				rechargeCheck: this.$cookie.get('rechargeCheck') ? this.$cookie.get('rechargeCheck') : false,
				userData: {},
				payStatus: 1,
				xcxInfo: {
					username: "gh_752c0bfb6fe7",
					path: "pages/index/index"
				},
			};
		},
		onLoad(options) {
			_this = this;
			if (options.type && options.type == 'index') {
				_this.$api.msg('余额不足，请充值');
			}
			_this.getXcxInfo();
			_this.getUserData();
			_this.peiceALL = _this.priceList[_this.choseIndex].dou
		},
		methods: {
			checkRecharge() {
				this.rechargeCheck = !this.rechargeCheck;
				this.$cookie.set('rechargeCheck', this.rechargeCheck);
			},
			onInput(event) {
				let value = event.target.value;
				value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
				value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入2个小数
				if (value.indexOf(".") < 0 && value != "") {
					//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额  
					value = parseFloat(value);
				}
				_this.$nextTick(function() {
					_this.peiceNew = value;
					_this.peiceALL = value;
					if (!value) {
						_this.peiceALL = _this.priceList[_this.choseIndex].dou;
					}
				})
			},
			getUserData() {
				_this.$HTTP({
					method: 'GET',
					url: 'shopServer/user/getUserInfo',
					data: {
						time: Date.parse(new Date())
					}
					// header: 'form'
				}).then(res => {
					res.balance = priceInteger(res.balance);
					_this.userData = res;
				}).catch(err => {
					console.log(err);
				});
			},
			clickMoney(index, price) {
				_this.choseIndex = index;
				_this.peiceALL = price;
			},
			// 获取跳转的小程序的配置信息
			getXcxInfo() {
				_this.$HTTP({
					method: 'GET',
					url: 'shopServer/pay/getRechargeConfig',
					data: {
						time: Date.parse(new Date())
					}
					// header: 'form'
				}).then(res => {
					_this.xcxInfo = res;
				}).catch(err => {
					console.log(err);
				});
			},
			// 发起支付后确认支付状态
			payAfterStatus() {
				uni.showModal({
					title: '支付状态',
					content: '确认支付状态',
					cancelText: '支付失败',
					confirmText: '支付成功',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.getUserData();
						} else if (res.cancel) {
							console.log('用户点击取消');
							_this.getUserData();
						}
					}
				});
			},
			// 提交支付
			submit: debounce(function() {
				if (!_this.rechargeCheck) {
					_this.$api.msg('请先勾选服务协议！');
					return;
				}
				if (_this.peiceALL > 1000000) {
					_this.$api.msg('充值金额最高1000000');
					return;
				}
				if (_this.peiceALL <= 0) {
					_this.$api.msg('充值金额不能小于等于0');
					return;
				}
				const {aplus_queue} = window;
				aplus_queue.push({
				 action: 'aplus.record',
				  arguments: ['pay','1']
				});
				_this.$HTTP({
					method: 'GET',
					url: 'shopServer/version/getConfig',
					data: {
						amount: _this.peiceALL*100,
						time: Date.parse(new Date())
					}
					// header:'form'
				}).then(res => {
					window.location.href=res;
					_this.payAfterStatus();
				}).catch(err => {
					console.log(err);
				});
			}, 250),
			goUrl() {
				_this.$routerTo.navigateTo({
					path: '/pagesnew/me/webview?url=https://home.miaokaikeji.com/web/agreement/serviceAgreement.html'
				});
			},
		}
	};
</script>

<style>
	page {
		background: white;
	}
</style>
<style lang="scss" scoped>
	.colorq {
		color: #FF9416;
	}

	.xuan {
		background: #FFD00D !important;
	}

	.color1 {
		color: white !important;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 0 40rpx 220rpx 40rpx;

		.box1 {
			width: 100%;
			height: 147rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F0F0F0;

			.aa {
				display: flex;
				align-items: center;
			}

			.bb {
				color: #999999;
				font-size: 28rpx;
			}

			.left {
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}

			.right {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				display: flex;
				align-items: center;
				margin-left: 10rpx;

				image {
					width: 38rpx;
					height: 37rpx;
					margin-right: 10rpx;
				}
			}
		}

		.box2 {
			width: 100%;

			.box {
				width: 100%;

				.xx {
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.item {
						width: 200rpx;
						height: 110rpx;
						background: #F5F5F5;
						border-radius: 16rpx;
						margin-top: 35rpx;
						display: flex;
						flex-wrap: wrap;

						.left {
							width: 100%;
							display: flex;
							align-items: center;
							font-size: 36rpx;
							font-weight: bold;
							color: #333333;
							justify-content: center;
							margin-top: 15rpx;

							image {
								width: 32rpx;
								height: 30rpx;
								margin-right: 10rpx;
							}
						}

						.right {
							width: 100%;
							font-size: 24rpx;
							color: #999999;
							text-align: center;
						}
					}
				}

				.zdy {
					width: 100%;
					height: 100rpx;
					border-bottom: 2rpx solid #F0F0F0;
					margin-top: 26rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						width: 30%;
						font-size: 28rpx;
						font-weight: bold;
						color: #333333;
					}

					.input {
						width: 100%;
						height: 80rpx;
						font-size: 32rpx;
					}
				}
			}
		}

		.box3 {
			width: 100%;
			margin-top: 70rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				position: relative;

				image {
					width: 42rpx;
					height: 42rpx;
				}

				text {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					margin-left: 15rpx;
				}
			}

			.right {
				width: 44rpx;
				height: 44rpx;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}

		.ts1 {
			width: 100%;
			font-size: 28rpx;
			font-weight: bold;
			color: #999999;
			margin-top: 120rpx;
		}

		.ts2 {
			width: 100%;
			font-size: 24rpx;
			color: #999999;
			margin-top: 30rpx;
		}

		.xy {
			width: 100%;
			height: 54rpx;
			position: fixed;
			left: 0;
			bottom: 140rpx;
			background: #FFF3DD;
			display: flex;
			align-items: center;
			justify-content: center;

			.qeqeqe {
				width: 30rpx;
				height: 30rpx;

				image {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.qwe {
				font-size: 22rpx;
				color: #24323B;
				margin-left: 10rpx;
			}
		}

		.btn-box {
			width: 100%;
			height: 140rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -3rpx 10rpx 1rpx rgba(0, 0, 0, 0.05);
			position: fixed;
			left: 0;
			bottom: 0;
			box-sizing: border-box;
			padding: 0 18rpx 0 46rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.text1 {
					font-size: 32rpx;
					color: #24323B;
				}

				.text2 {
					font-size: 42rpx;
					font-weight: bold;
					color: #24323B;
				}
			}

			.right {
				width: 389rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				color: #FFFFFF;
				background: #FF9416;
				border-radius: 50rpx;
				font-weight: bold;
			}
		}
	}
</style>